<template>
	<view style="height: 100vh;background: #F6F6F6;">
		<view class="header" :style="{'height':statusBarHeight+'px'}">
			<view class="navon" :style="{'height':statusBarHeight+'px','padding-top':statusBarHeight1+'px'}">
				<view class="header-back" @click="goBack()">
					<i class="iconfont" style="font-size: 20px;">&#xe605</i>
				</view>
				<view class="hearder-content">
					评价
				</view>
			</view>
		</view>
		<view class="">
			<view class="content-bg" :style="{'top':statusBarHeight+'px'}">
				<view class="content-tab">
					<text>标签</text>

					<view class="evaluateTabAll">
						<view class="evaluateTab" v-for="(item,index) in tagsList"
							:class="{ 'active': isSelected2.includes(item.id) }" @click="selectTab2(item.id)">
							{{item.name}}
						</view>
					</view>
				</view>


			</view>
		</view>



		<view class="submitBtn" @click="submitEva">
			提交
		</view>

		<view class="bottom-tabbar">
			<tabbar :currentPage="2" />
		</view>
	</view>
</template>

<script>
	import index from '../../uni_modules/uview-ui';

	export default {

		data() {
			return {
				statusBarHeight: 0,
				statusBarHeight1: 0,
				titleBarHeight:0,
				tabList: [{
						id: 1,
						name: '有耐心',
					},
					{
						id: 2,
						name: '机制',
					},
					{
						id: 3,
						name: '勇敢',
					},
				],
				selectedIndex: -1,
				isSelected2:[],
				tagsList:[],
			}
		},
		onLoad(option) {
			this.id=option.id
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
						this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
						this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
						this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
						this.statusBarHeight = res.statusBarHeight * 1 + 46;
						this.statusBarHeight1 = res.statusBarHeight;
					// #endif
				},
			});	
			this.getData()
		},
		methods: {
			
			selectTab2(id) {
				if(this.isSelected2.includes(id)){
					this.isSelected2 = this.isSelected2.filter(function(value) {
					    return value !== id;
					})
				}else{
					this.isSelected2.push(id)
				}
			},
			getData(){
				this.getTages()
			
			},
			getTages(){
				this.rq.getData('daren/tags').then(res => {
					this.tagsList=res.data
				})
			},
			submitEva(){
				var data={
					order_id:this.id,
					type:1,
					tag_ids:this.isSelected2.join(','),
					// xing_ji:this.starInfo,
					// ping_tag_id:this.pingList[this.isSelected].id
				};
				this.rq.getData('daren/evaluate',data).then(res => {
					uni.showToast({
						title:res.msg,
					})
					setTimeout(()=>{
						uni.navigateBack({
						    delta: 1 // 返回的页面数，默认为1，表示返回上一页
						});
					},1500);
					
				})
				
			},
			goBack() {
				uni.navigateBack()
			},
			selectTab(index) {
				console.log(111);
				this.selectedIndex = index;
			}

		}
	}
</script>

<style lang="scss" scoped>
	.submitBtn {
		width: 700rpx;
		height: 74rpx;
		background: #FF5866;
		color: #fff;
		text-align: center;
		line-height: 71rpx;
		position: absolute;
		bottom: 600rpx;
		left: 27rpx;
		border-radius: 200rpx;
	}

	.evaluateTabAll {
		display: flex;
		margin: 30rpx 0;
	}

	.evaluateTab {
		margin-right: 20rpx;
		border: 2rpx solid #FF7681;
		border-radius: 34rpx;
		width: 132rpx;
		height: 56rpx;
		text-align: center;
		line-height: 53rpx;
		background-color: #FFEEEF;
		color: #FF7681;
		font-size: 26rpx;
	}

	.evaluateTab.active {
		color: #fff;
		background-color: #FF7681;
	}

	.content-bg {

		position: relative;
	}

	.content-tab {
		width: 700rpx;
		height: 272rpx;
		margin: 40rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
	}

	.header {
		width: 100%;
		height: auto;
		display: table;
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: 10;
		background-color: #fff;

		.header-back {
			margin-left: 10rpx;
			height: 13px;
			line-height: 13px;
			position: absolute;
			left: 0;
			color: #000;
		}

		.hearder-content {
			font-size: 16px;
			font-weight: normal;
			line-height: 28px;
			text-align: center;
			display: flex;
			align-items: center;
			letter-spacing: 0px;
			color: #000;
		}

		.navon {
			width: 100%;
			height: auto;
			position: absolute;
			top: 0px;
			left: 0px;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

	}
</style>